<template>
  <a-modal
    v-model:visible="state.visible"
    :maskClosable="false"
    :width="720"
    :footer="null"
    :title="title"
    :afterClose="afterClose"
  >
    <div class="detail-div__content">
      <!-- 法院公告详情 -->
      <div v-if="props.detail?.dimensionName === '新增法院公告'" class="detail-div__table">
        <div class="detail-div__table-row">
          <span class="detail-span__label">当事人</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.people) }}</span>
          <span class="detail-span__label">身份</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.role) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">公共类型</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.type) }}</span>
          <span class="detail-span__label">公告日期</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.date) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">公告法院</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.court) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">案由</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.caseReason) }}</span>
        </div>
      </div>

      <!-- 开庭公告详情 -->
      <div v-if="props.detail?.dimensionName === '新增开庭公告'" class="detail-div__table">
        <div class="detail-div__table-row">
          <span class="detail-span__label">案由</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.causeAction) }}</span>
          <span class="detail-span__label">案号</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.caseNo) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">开庭时间</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.hearingDate) }}</span>
          <span class="detail-span__label">承办部门</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.department) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">审判长/主判人</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.judge) }}</span>
          <span class="detail-span__label">当事人</span>
          <span class="detail-span__content">
            {{ getParty(state.detail?.relatedCompanies) }}
          </span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">法院</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.court) }}</span>
          <span class="detail-span__label">法庭</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.tribunal) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">公告内容</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.content) }}</span>
        </div>
      </div>

      <!-- 裁判文书详情 -->
      <div v-if="props.detail?.dimensionName === '新增裁判文书'" class="detail-div__table">
        <div class="detail-div__table-row">
          <span class="detail-span__label">案由</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.causeAction) }}</span>
          <span class="detail-span__label">执行案号</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.causeNo) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">身份</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.role) }}</span>
          <span class="detail-span__label">当事人</span>
          <span class="detail-span__content">
            {{ getParty(state.detail?.relatedCompanies) }}
          </span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">案件金额</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.subAmount) }}</span>
          <span class="detail-span__label">判决日期</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.date) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">判决结果</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.judgeresult) }}</span>
        </div>
      </div>

      <!-- 经营异常详情 -->
      <div v-if="props.detail?.dimensionName === '新增经营异常'" class="detail-div__table">
        <!--        <div class="detail-div__table-row">-->
        <!--          <span class="detail-span__label">案号</span>-->
        <!--          <span class="detail-span__content"></span>-->
        <!--          <span class="detail-span__label">经营异常类型</span>-->
        <!--          <span class="detail-span__content"></span>-->
        <!--        </div>-->
        <div class="detail-div__table-row">
          <span class="detail-span__label">列入经营异常名录原因</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.inReason) }}</span>
        </div>
        <!--        <div class="detail-div__table-row">-->
        <!--          <span class="detail-span__label">拖欠天数</span>-->
        <!--          <span class="detail-span__content"></span>-->
        <!--          <span class="detail-span__label">涉及金额</span>-->
        <!--          <span class="detail-span__content"></span>-->
        <!--        </div>-->
        <div class="detail-div__table-row">
          <span class="detail-span__label">列入日期</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.inDate) }}</span>
          <span class="detail-span__label">列入机关</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.department) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">数据来源</span>
          <span class="detail-span__content"></span>
        </div>
      </div>

      <!-- 失信被执行人详情 -->
      <div v-if="props.detail?.dimensionName === '新增失信被执行人'" class="detail-div__table">
        <div class="detail-div__table-row">
          <span class="detail-span__label">失信被执行人行为具体情形</span>
          <span class="detail-span__content">{{
            isEmptyReplace(state.detail?.executionDesc)
          }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">履行情况</span>
          <span class="detail-span__content">{{
            isEmptyReplace(state.detail?.executionStatus)
          }}</span>
          <span class="detail-span__label">立案文号</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.caseNumber) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">立案日期</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.date) }}</span>
          <span class="detail-span__label">执行依据文号</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.docNumber) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">执行法院</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.court) }}</span>
        </div>
      </div>

      <!-- 股权冻结详情 -->
      <div v-if="props.detail?.dimensionName === '新增股权冻结'" class="detail-div__table">
        <div class="detail-div__table-row">
          <span class="detail-span__label">执行法院</span>
          <span class="detail-span__content">{{
            isEmptyReplace(state.detail?.executiveCourt)
          }}</span>
          <span class="detail-span__label">执行事项</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.assistItem) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">执行裁定文书号</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.adjudicateNo) }}</span>
          <span class="detail-span__label">执行通知文号</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.number) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">被执行人</span>
          <span class="detail-span__content">{{
            isEmptyReplace(state.detail?.beExecutedPerson)
          }}</span>
          <span class="detail-span__label">被执行人持有股权、其他投资权益数额</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.freezeAmount) }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">冻结期限自</span>
          <span class="detail-span__content">{{
            isEmptyReplace(state.detail?.freezeStartDate)
          }}</span>
          <span class="detail-span__label">冻结期限至</span>
          <span class="detail-span__content">{{
            isEmptyReplace(state.detail?.freezeEndDate)
          }}</span>
        </div>
        <div class="detail-div__table-row">
          <span class="detail-span__label">冻结期限</span>
          <span class="detail-span__content">{{
            isEmptyReplace(state.detail?.freezeYearMonth)
          }}</span>
          <span class="detail-span__label">公示日期</span>
          <span class="detail-span__content">{{ isEmptyReplace(state.detail?.publicDate) }}</span>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, readonly, watch } from 'vue';

  import { getCompanyMonitorDetail } from '/@/api/monitoringCenter';

  const emits = defineEmits(['close']);

  const props = defineProps({
    visible: {
      type: Boolean,
      default: () => true,
    },
    detail: {
      type: Object,
      default: () => null,
    },
  });

  watch(
    () => props.visible,
    () => {
      state.visible = props.visible;
    },
  );

  const dictionary = readonly({
    新增开庭公告: {
      title: '开庭公告详情',
    },
    新增法院公告: {
      title: '法院公告详情',
    },
    新增裁判文书: {
      title: '裁判文书详情',
    },
    新增经营异常: {
      title: '经营异常详情',
    },
    新增失信被执行人: {
      title: '失信被执行人详情',
    },
    新增股权冻结: {
      title: '股权冻结详情',
    },
    新增被执行人: {
      title: '被执行人详情',
    },
  });

  const title = computed(() => {
    if (!props.detail) {
      return '';
    }

    const titleContent = dictionary[props.detail.dimensionName];
    return titleContent ? titleContent.title : '';
  });

  const state: any = reactive({
    loading: false,
    visible: props.visible,
    detail: null,
  });

  const afterClose = () => {
    emits('close');
  };

  const getParty = (relatedCompanies) => {
    if (!relatedCompanies) return '';
    return relatedCompanies.map((item) => `${item.role}:${item.name};`).join(' ');
  };

  const isEmptyReplace = (value) => {
    if (value === undefined || value === null || value === '') {
      return '-';
    }
    return value;
  };

  const init = () => {
    if (props.detail) {
      state.loading = true;
      getCompanyMonitorDetail({
        dimensionName: props.detail.dimensionName,
        sourceId: props.detail.sourceId,
      })
        .then((data) => {
          state.detail = data;
        })
        .finally(() => {
          state.loading = false;
        });
    }
  };
  init();
</script>

<style lang="less" scoped>
  .detail-div__content {
    width: 100%;
    padding: 32px 20px;

    .detail-div__table {
      width: 100%;
      border: 1px solid #e4e7ed;
      border-left: none;
      border-bottom: none;

      .detail-div__table-row {
        width: 100%;
        display: flex;

        .detail-span__label {
          display: flex;
          width: 140px;
          min-height: 40px;
          align-items: center;
          background: #f5f7fa;
          border-left: 1px solid #e4e7ed;
          border-bottom: 1px solid #e4e7ed;
          box-sizing: border-box;
          padding: 0px 12px;
          color: #606266;
        }

        .detail-span__content {
          display: flex;
          align-items: center;
          flex: 1;
          border-left: 1px solid #e4e7ed;
          border-bottom: 1px solid #e4e7ed;
          color: #303133;
          box-sizing: border-box;
          padding: 10px 12px;

          &:empty {
            &::before {
              content: '-';
            }
          }
        }
      }
    }
  }
</style>
